<template>
    <el-card style="margin-bottom: 80px;">
        <el-button type="primary" style="margin-bottom: 10px" @click="add">
            新增分类
        </el-button>
        <!-- 新增分类的弹出框 -->
        <el-dialog v-model="dialogVisible" :title="id ? '修改分类' : '新增分类'" :before-close="handleBeforeClose">
            <Categoryedit ref="form" :id="id" @success="editSuccess" />
        </el-dialog>
        <div>
            <el-table :data="tableData" style="width: 100%" row-key="id" border default-expand-all>
                <el-table-column prop="name" label="分类名称" sortable />
                <el-table-column label="分类级别">
                    <template #default="{ row }">
                        <template v-if="row.pid == 0">一级分类</template>
                        <template v-else>二级分类</template>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="分类编号" />
                <el-table-column prop="picture" label="分类图片">
                    <template #default="{ row }">
                        <el-image v-if="row.picture != ''" :src="row.picture" fit="contain"
                            style="display: flex; align-items: center; height: 60px" />
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200px">
                    <template #default="{ row }">
                        <el-button type="warning" @click="edit(row)">编辑</el-button>
                        <el-button type="danger" @click="del(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { delCategory, getCategoryList } from "../../api/api";
import { ElMessageBox, ElMessage } from "element-plus";
import Categoryedit from "../../components/CategoryEdit.vue";
import config from '../../config'

const tableData = ref([]);
const form = ref();
const id = ref(0);
const dialogVisible = ref(false);

const arrayToTree = (items) => {
    const result = [];
    const itemMap = {};
    for (const item of items) {
        itemMap[item.id] = { ...item, children: [] };
    }

    for (const item of items) {
        const treeItem = itemMap[item.id];

        if (item.pid === 0) {
            result.push(treeItem);
        } else {
            const parent = itemMap[item.pid];
            parent.children.push(treeItem);
        }
    }
    return result;
};

onMounted(() => {
    loadCategoryList();
});
const loadCategoryList = async () => {
    const data = await getCategoryList();
    const baseURL = config.baseURL;
    const processedData = data.map(item => ({
        ...item,
        picture: item.picture ? `${baseURL}${item.picture}` : ''
    }));
    console.log(processedData);
    tableData.value = arrayToTree(processedData);
};
const add = () => {
    if (form.value) {
        form.value.resetForm(0);
    }
    id.value = 0;
    dialogVisible.value = true;
};
const edit = (row) => {
    if (form.value) {
        form.value.resetForm(row.id);
    }
    id.value = row.id;
    dialogVisible.value = true;
};
const del = (row) => {
    if (row.pid === 0 && row.children.length !== 0) {
        ElMessage({
            message: "该分类下有二级分类，不可删除",
            type: "warning",
        });
    } else {
        ElMessageBox.confirm("确定删除吗?", {
            showClose: false,
            closeOnClickModal: false,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
        }).then(async () => {
            if (await delCategory({ id: row.id })) {
                loadCategoryList();
            }
        });
    }
};
const handleBeforeClose = () => {
    ElMessageBox.confirm("确定要关闭吗?", {
        showClose: false,
        closeOnClickModal: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(async () => {
        dialogVisible.value = false;
    }).catch(() => { });
};

const editSuccess = () => {
    dialogVisible.value = false;
    loadCategoryList();
};
</script>
